<template>
  <div class="indexinfo">
      <!-- <div class="search">
        <input type="text" name="" id="" placeholder="搜索">
        <div class="icon-search searchicon"></div>
      </div> -->
      <el-carousel class="banner" :autoplay="false" :loop="false" arrow="never" height = "100%" indicator-position="none" ref="remarkCarusel">
        <el-carousel-item v-for="item in 1" :key="item">
          <div class="container">
            <div class="box left">
              <h1>
                vue+node.js<br>
                0到1实现即时通讯聊天室
              </h1>
              <p class="tip">
                单聊，群聊天<br>可发送文字，表情，图片，语音，位置
              </p>
              <p class="desc">
                如果对这个应用感兴趣，请前往下载应用，也可以下载源代码进行分享和学习。
              </p>
              <div class="mybtn">
                <a class="btn download" :href="serverurlapk+'files/download'">点击下载</a>
                <a class="btn" href="http://1.15.84.52:3001/">查看网页版</a>
                <a  class="btn link" href="https://gitee.com/zhouChenKai/wiki">查看源码(gitee)</a>
              </div>
            </div>
            <div class="box right" >
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
      <div class="dots">
        <div class="dot" v-for="item in 1" :key="item" ref="dot" @click="loop(item)" :class="{active:item == isActive}"></div>
      </div>
      <div class="recommend">
        <div class="info">
          <h1>模块数据</h1>
          <div>
            <p class="totalcount">{{mycount.totalcount}}</p>
            <p class="counttips">总访问量</p>
          </div>
          <div>
            <p class="daycount">{{mycount.percount}}</p>
            <p class="counttips">今日访问量</p>
          </div>
        </div>
        <div class="items">
            <div class="item" v-for="(item,index) in projects" :key="index" @click="myrouterto(item)">
                <div class="top">
                  <div class="itemlogo" :class="item.icon" :style="{backgroundColor:index == 0 ? '#34c758' : index == 1 ? '#007aff' : 'orange'}"></div>
                  <span :style="{color:index == 0 ? '#34c758' : index == 1 ? '#007aff' : 'orange'}">{{item.count}}</span>
                </div>
                <div class="middle">
                  <h3 :style="{color:index == 0 ? '#34c758' : index == 1 ? '#007aff' : 'orange'}">{{item.name}}</h3>
                  <p>
                  {{item.desc}}</p>
                </div>
                <div class="bottom" >
                  <div class="icon-jiantou mylink" :style="{backgroundColor:index == 0 ? '#34c758' : index == 1 ? '#007aff' : 'orange'}"></div>
                </div>
            </div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      isActive:1,
      expand:false,
      projects:[
        // {
        //   icon:'icon-wendang',
        //   name:'个人分享',
        //   desc:'我的个人记录,图片,心得分享项目过程',
        //   count:'13'
        // },
        //  {
        //   icon:'icon-daima',
        //   name:'项目作品',
        //   desc:'兴趣代码爱好',
        //   count:'03'
        // },
        //  {
        //   icon:'icon-biji',
        //   name:'技术交流',
        //   desc:'分享书写中遇到的难题以及解决方法',
        //   count:'16'
        // }
      ],
      mycount:{}
    }
  },
  created(){
    this.getcount();
    this.homepagecount();
    this.gethomepagecount();
  },
  methods:{
    homepagecount(){
      let options = {uid:new Date().getTime()};
      this.$http.post(this.serverurl+'homepagecount/add',options).then((result)=>{
      },(err)=>{
      })
    },
    gethomepagecount(){
      let options = {};
      this.$http.post(this.serverurl+'homepagecount/get',options).then((result)=>{
        let info = result.body;
        console.log(info)
        this.mycount = info;
      },(err)=>{
      })
    },
    myrouterto(item){
      if(item.name == '个人分享'){
         this.$router.push('/index/share')
      }else if(item.name == '项目作品'){
        this.$notify({
          title: '失败',
          message: '该页面未完成',
          type: 'error'
        });
      }else if(item.name == '技术交流'){
        this.$router.push('/index/technology')
      }
    },
    getcount(){
      let options = {};
      this.$http.post(this.serverurl+'count/getcount',options).then((result)=>{
      let info = result.body;
      this.projects = info;
      // console.log(info)
      },(err)=>{
      })
    },
    loop(item){
      this.isActive = item;
      this.$refs.remarkCarusel.setActiveItem(this.isActive-1)
    },
    myexpand(){//展开收缩
      this.expand = !this.expand;
      console.log(this.expand)
    },
    download(){
      this.$http.get('http://192.168.1.100:3000/files/download').then((result)=>{
          console.log(result)
        }, (err)=>{
          console.log(err)
        });
    }
  }
}
</script>

<style lang="less" scoped>
.indexinfo {
  background-color: #F5F5F5;
  color: #333;
  display: flex;
  flex-direction: column;
  flex-basis: auto;
  overflow: auto;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  flex: 1;
  .banner{
    padding: 1.0rem;
    box-sizing: border-box;
    width: 100%;
    height: 50%;
    border-radius: 1.9rem;
    background-color: #fff; 
    .container{
      width: 100%;
      height: 100%;
      display: flex;
      .box{
        box-sizing: border-box;         
      }
      .left{
        display: flex;
        justify-content: space-around;
        flex-direction: column;
        width: 36rem;
        padding: 1.8rem;
        h1{
          color: rgba(16, 16, 16, 100);
          font-size: 3.2rem;
          text-align: left;
          font-family: SourceHanSansSC-bold;
          line-height: 4.0rem;
        }
        .tip{
          // margin-top: 10rem;
          color: rgba(64, 64, 64, 100);
          font-size: 1.4rem;
          text-align: left;
          font-family: SourceHanSansSC-regular;
          line-height: 2.0rem;
          font-weight: bold;
        }
        .desc{
          // margin-top: 50rem;
          color: rgba(158, 158, 158, 100);
          font-size: 1.2rem;
          text-align: left;
          font-family: SourceHanSansSC-regular;
        }
        .mybtn{
          // margin-top: 80rem;
          .btn{
            display: inline-block;
            box-sizing: border-box;
            width: 8rem;
            height: 3.0rem;
            line-height: 2.8rem;
            border-radius: 1.2rem;
            color: rgba(16, 16, 16, 100);
            font-size: 1rem;
            text-align: center;
            font-family: Roboto;
            border: 0.1rem solid rgba(187, 187, 187, 100);
            &.link{
              width: 10rem;
              background-color: rgba(0, 122, 255, 100);
              color: rgba(255, 255, 255, 100);
            }
          }

        }
      }
      .right{
        flex: 1;
        padding: 2.0rem 4.0rem;
        background-image: url("../commom/images/wikichart.png");
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 100%;
      }
    }
  }
  .dots{
    margin-top: 1.1rem;
    text-align: right;
    .dot{
      display: inline-block;
      width: 1.0rem;
      height: 1.0rem;
      border-radius: 100%;
      background-color: #fff;
      border: 0.1rem solid rgba(187, 187, 187, 100);
      margin-right: 0.4rem;
      cursor: pointer;
      &.active{
        border:0;
        background-color: rgba(0, 122, 255, 100);
      }
    }
  }
  .recommend{
    padding: 3.0rem 0rem;
    display: flex;
    flex: 1;
    .info{
      display: flex;
      max-height: 30rem;
      min-width: 20.0rem;;
      justify-content: space-around;
      flex-direction: column;
      padding-left: 2.0rem;
      width: 30.0rem;
      h1{
        color: rgba(16, 16, 16, 100);
        font-size: 3.6rem;
        text-align: left;
      }
      .totalcount,.daycount{
        color: rgba(16, 16, 16, 100);
        font-size: 4.0rem;
        text-align: left;
      }
      .counttips{
        color: rgba(74, 71, 71, 100);
        font-size: 1rem;
        text-align: left;
        font-family: SourceHanSansSC-regular;
      }
    }
    .items{
      display: flex;
      flex:1;
      padding: 0 2.0rem;
      .item{
        cursor: pointer;
        max-height: 30rem;
        margin-right: 4.0rem;
        padding: 1.0rem;
        width: 22.0rem;
        background-color: #fff;
        border-radius: 2.2rem;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .top{
          display: flex;
          justify-content: space-between;
          align-items: center;
          .itemlogo{
            width: 6.0rem;
            height: 6.0rem;
            line-height: 6.0rem;
            border-radius: 1.2rem;
            background-color: rgba(52, 199, 88, 100);
            text-align: center;
            font-size: 3.0rem;
            color: #fff;
          }
          span{
            color: rgba(250, 219, 20, 100);
            font-size: 4.8rem;
            text-align: left;
            font-family: SourceHanSansSC-regular;
          }
        }
        .middle{
          h3{
            color: rgba(16, 16, 16, 100);
            font-size: 2.4rem;
            text-align: left;
            font-weight: bold;
          }
          p{
            margin-top: 1.5rem;
            color: rgba(158, 158, 158, 100);
            font-size: 1.6rem;
            text-align: left;
          }
        }
        .bottom{
          .mylink{
            float: right;
            width: 8.0rem;
            height: 3.0rem;
            padding: 0 1.0rem;
            box-sizing: border-box;
            line-height: 3.0rem;
            border-radius: 2.4rem;
            background-color: rgba(40, 217, 54, 100);
            text-align: right;
            color: #fff;
            font-size: 4.0rem;
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>